import React, { useState } from "react";
import { Tree, SideTree, message, Button } from "@ct0/ui";
import PanelTemplate from "./panelTemplate";

const treeData = [
  {
    key: "1",
    title: "1",
    count: 99,
    children: [
      {
        key: "1.1",
        title: "1.1",
        count: 9,
        children: [
          {
            key: "1.1.1",
            title: "1.1.1",
            children: [
              {
                key: "1.1.1.1",
                title: "1.1.1.1",
              },
            ],
          },
        ],
      },
    ],
  },
  {
    key: "2",
    title: "2",
  },
];

export default function TreePanel() {
  const [selectedKey, setSelectedKey] = useState("1");

  const val = {
    title: "Tree 组件",
    descriptions: [
      "多层次的结构列表",
      "可以展示层级关系，并且具有展开、收起、选择、编辑等交互功能",
    ],
    content: {
      title: "代码展示",
      columns: 2,
      children: [
        {
          title: "基本",
          descriptions:
            "基础的用法，展示多层次结构，具有展开收起、选中高亮、可勾选等功能",
          component: (
            <>
              <Tree
                treeData={treeData}
                title="Title"
                highlightSelected
                checkable
                selected={selectedKey}
                disabledTreeTitle
                onRootNodeSelect={() => message.info("root selected")}
                onSelect={setSelectedKey}
                nodeTitleRender={(node) => node.title + "😁"}
              />
              <div>
                <Button type="blue" onClick={() => setSelectedKey("1.1.1.1")}>
                  选中节点 1.1.1.1
                </Button>
                &nbsp;&nbsp;
                <Button type="blue" onClick={() => setSelectedKey(undefined)}>
                  清除选中
                </Button>
                <div>selected：{selectedKey}</div>
              </div>
            </>
          ),
          codeSnippet: `import { Tree } from "@ct0/ui";

<Tree
  treeData={treeData}
  title="Title"
  highlightSelected
  checkable
  selected={selectedKey}
  disabledTreeTitle
  onRootNodeSelect={() => message.info("root selected")}
  onSelect={setSelectedKey}
  nodeTitleRender={(node) => node.title + "😁"}
/>         `,
        },
        {
          title: "可编辑、可搜索",
          component: (
            <SideTree
              treeData={treeData}
              editable
              checkable
              onSelect={(key) => console.log("select", key)}
              onCheck={(keys) => console.log("check", keys)}
              onChange={(data) => console.log("change", data)}
              onNodeRemove={(key) => message.info("删除节点回调函数")}
              onNodeTitleChange={(key, title, data) =>
                message.info("节点标题修改回调函数")
              }
              onNodeAdd={(key, title) => message.info("新增节点回调函数")}
            />
          ),
          codeSnippet: `import { Tree } from "@ct0/ui";
          
<SideTree
  treeData={treeData}
  editable
  checkable
  onSelect={(key) => console.log("select", key)}
  onCheck={(keys) => console.log("check", keys)}
  onChange={(data) => console.log("change", data)}
  onNodeRemove={(key) => message.info("删除节点回调函数")}
  onNodeTitleChange={(key, title, data) => message.info("节点标题修改回调函数")}
  onNodeAdd={(key, title) => message.info("新增节点回调函数")}
/>`,
        },
      ],
    },
    componentApi: [
      {
        param: "treeData",
        description: "树结构的数据",
        type: "TreeDataType",
        required: true,
      },
      {
        param: "title",
        description: "顶点标题",
        type: "string",
        default: "全部",
      },
      {
        param: "defaultExpandAll",
        description: "默认展开所有树节点",
        type: "boolean",
        default: "false",
      },
      {
        param: "editable",
        description: "是否可以编辑树结构",
        type: "boolean",
        default: "false",
      },
      {
        param: "checkable",
        description: "是否可以选择节点",
        type: "boolean",
        default: "false",
      },
      {
        param: "disabledCheckAll",
        description: "禁止选择根节点的复选框",
        type: "boolean",
        default: "false",
      },
      {
        param: "maxShowDeepth",
        description: "显示树结构最大层数",
        type: "number",
      },
      {
        param: "maxCreateDeepth",
        description: "允许增加子节点树结构最大层数",
        type: "number",
      },
      {
        param: "highlightSelected",
        description: "是否高亮选中节点",
        type: "boolean",
        default: "false",
      },
      {
        param: "defaultSelected",
        description: " 默认选中的节点",
        type: "string|number",
      },
      {
        param: "defaultChecked",
        description: "默认选中复选框的节点",
        type: "Array<string | number>",
      },
      {
        param: "checked",
        description: "受控，选中复选框的树节点",
        type: "Array<string | number>",
      },
      {
        param: "className",
        description: "",
        type: "string",
      },
      {
        param: "onRootNodeSelect",
        description: "根节点点击触发的事件",
        type: "() => void",
      },
      {
        param: "nodeTitleChangeValidator",
        description: "节点标题修改触发的校验",
        type: "(text: string) => string | undefined",
      },
      {
        param: "nodeTitleRender",
        description: "节点标题自定义渲染内容",
        type: "(node: TreeNodeType) => ReactNode",
      },
      {
        param: "onSelect",
        description: "节点点击触发的事件",
        type: "(key: string | number) => void",
      },
      {
        param: "onCheck",
        description: "点击节点复选框触发的事件",
        type: "(keys: Array<string | number>) => void",
      },
      {
        param: "onChange",
        description: "树结构 treeData 改变触发的事件",
        type: "(treeData: TreeRawDataType) => void",
      },
      {
        param: "onNodeTitleChange",
        description: "修改节点标题触发的事件",
        type: `(key: string | number, title: string, treeData?: TreeDataType) => void`,
      },
      {
        param: "onNodeRemove",
        description: "删除节点触发的事件",
        type: "(key: string | number) => void",
      },
      {
        param: "onNodeAdd",
        description: "新增节点触发的事件",
        type: "(key: string | number, title: string) => void",
      },
    ],
  };

  return <PanelTemplate {...val} />;
}
